import { ExpertSceneDetail } from '@/api/expert';
import { Tab, Tabs } from '@antmjs/vantui';
import { Text, View } from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import { useMemo } from 'react';
import { useRequest } from 'taro-hooks';
import Tags from '../components/Tags';

export default function Page() {
  const router = useRouter();
  const { data: detail } = useRequest(() =>
    ExpertSceneDetail({ sceneId: router.params?.id! })
  );

  //相关专家
  const experts = useMemo(() => detail?.experts, [detail]);

  return (
    <View>
      <View
        className='h-[434px] bg-cover'
        style={{
          backgroundImage: `url(${detail?.img})`,
        }}
      ></View>

      <View className=' mx-4 bg-white rounded-lg shadow-lg px-4 py-5 -mt-8'>
        <Text className=' font-bold text-black text-lg'>{detail?.name}</Text>
        {Boolean(detail?.points) && (
          <View
            className='w-[228px] h-[32px] leading-[32px] pl-[34px] text-white bg-cover text-[20px] mt-1'
            style={{
              backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-activity-2.png)`,
            }}
          >
            参与可获得{detail?.points}积分
          </View>
        )}
      </View>

      <Tabs className=' my-6' animated>
        <Tab title='场景介绍'>
          <View
            className=' bg-white p-6'
            dangerouslySetInnerHTML={{
              __html: detail?.info!,
            }}
          />
        </Tab>
        <Tab title='相关专家'>
          <View className=' bg-white p-4'>
            {experts?.map((item) => (
              <View
                key={item.id}
                className='border border-solid border-gary2 flex p-4 rounded-lg mb-4'
                onClick={() => {
                  Taro.navigateTo({
                    url: `/pages/professional/detail?id=${item.id}&sceneId=${detail?.id}`,
                  });
                }}
              >
                <View
                  className='w-[144px] h-[188px] bg-cover rounded-lg overflow-hidden mr-3'
                  style={{
                    backgroundImage: `url(${item.headimg})`,
                  }}
                />
                <View className='flex-1'>
                  <View className=' flex items-center'>
                    <Text className=' font-bold text-black text-[36px]'>
                      {item.name}
                    </Text>
                    <Text className=' text-xl ml-auto text-primary font-bold'>
                      {item.beans}
                    </Text>
                    <Text className=' text-xs text-primary ml-1'>帮豆</Text>
                  </View>
                  {item.tags && (
                    <View className='mt-1'>
                      <Tags list={item.tags.split(',')} />
                    </View>
                  )}
                  <Text className=' text-xs mt-2 block'>
                    {item.description}
                  </Text>
                </View>
              </View>
            ))}
          </View>
        </Tab>
      </Tabs>
    </View>
  );
}
